function getData() {
	$.ajax({
    	type: "POST",
     	dataType: "json",
      	crossDomain: true,
      	url: "http://localhost:49331/WSRestFul.asmx/GetPersonalConfig",
      	data: {}
    }) //ajax
    .done(function(data) {
    	if (data) drawUI(data);
    }) //done
    .fail(function(data) {                
        bootbox.dialog({
            title: 'Fatal Error',
            message : '<div class="alert alert-danger" role="alert"><strong>Error in connection !!!</strong></div>'
        });//boobox
    }) //fail
}

function drawUI(data) {
	var divJaw = document.getElementById('div-jaw');
	var lblJaw = document.getElementById('panel-jaw-title');

	var divEarlobe = document.getElementById('div-earlobe');
	var lblEarlobe = document.getElementById('panel-earlobe-title');

	var divEarShp = document.getElementById('div-earshape');
	var lblEarShp = document.getElementById('panel-earshape-title');

	var divHairStyle = document.getElementById('div-hairstyle');
	var lblHairStyle = document.getElementById('panel-hairstyle-title');

	var divSkinColor = document.getElementById('div-skin-color');
	var lblSkinColor = document.getElementById('panel-skin-color');

	data.forEach(function(obj) { 
		switch (obj.Type) {
		    case 'ลักษณะรูปคาง':
		        if (!lblJaw) return;
				if (lblJaw.innerHTML === '') {					
					lblJaw.innerHTML = obj.Type;
				}				
				
				var rdo = document.createElement('input');
				rdo.type = 'radio';
				rdo.name = 'rdoJaw';				
				rdo.value = obj.Name;
				if (obj.Name === 'Round') {
				    rdo.setAttribute("checked", "true");
				}

				var rdoLbl = document.createElement('p');
				rdoLbl.className = 'form-control-static';
				rdoLbl.appendChild(rdo);				
				rdoLbl.innerHTML += "&nbsp;&nbsp;&nbsp;" + obj.NameTh;

				var image = new Image();
				image.onload = function () {
				    image.style.width = "24px";
				    image.style.height = "24px";
				    image.style.marginLeft = "10px";
				}
				image.src = obj.Image;				

				var row = document.createElement('div');
				row.className = 'form-group col-md-3';
				row.appendChild(rdoLbl);
				row.appendChild(image);

				divJaw.appendChild(row);
				break;

		    case 'ลักษณะติ่งหู':
		        if (!lblEarlobe) return;
		        if (lblEarlobe.innerHTML === '') {
		            lblEarlobe.innerHTML = obj.Type;
				}				
				
				var rdo = document.createElement('input');
				rdo.type = 'radio';
				rdo.name = 'rdoTing';
				rdo.value = obj.Name;

				var rdoLbl = document.createElement('p');
				rdoLbl.className = 'form-control-static';
				rdoLbl.appendChild(rdo);				
				rdoLbl.innerHTML += "&nbsp;&nbsp;&nbsp;" + obj.NameTh;

				var image = new Image();
				image.onload = function () {
				    image.style.width = "64px";
				    image.style.marginLeft = "10px";
				}
				image.src = obj.Image;;

				var row = document.createElement('div');
				row.className = 'form-group col-md-4';
				row.appendChild(rdoLbl);
				row.appendChild(image);

				divEarlobe.appendChild(row);
				break;

		    case 'ลักษณะใบหู':
		        if (!lblEarShp) return;
		        if (lblEarShp.innerHTML === '') {
		            lblEarShp.innerHTML = obj.Type;
				}				
				
				var rdo = document.createElement('input');
				rdo.type = 'radio';
				rdo.name = 'rdoBaihu';
				rdo.value = obj.Name;

				var rdoLbl = document.createElement('p');
				rdoLbl.className = 'form-control-static';
				rdoLbl.appendChild(rdo);				
				rdoLbl.innerHTML += "&nbsp;&nbsp;&nbsp;" + obj.NameTh;

				var image = new Image();
				image.onload = function () {
				    image.style.width = "64px";
				    image.style.marginLeft = "10px";
				}
				image.src = obj.Image;

				var row = document.createElement('div');
				row.className = 'form-group col-md-4';
				row.appendChild(rdoLbl);
				row.appendChild(image);

				divEarShp.appendChild(row);
				break;
		    case 'ความยาวทรงผม':
		        if (!lblHairStyle) return;
		        if (lblHairStyle.innerHTML === '') {
		            lblHairStyle.innerHTML = obj.Type;
		        }

		        var rdo = document.createElement('input');
		        rdo.type = 'radio';
		        rdo.name = 'rdoHairStyle';
		        rdo.value = obj.Name;

		        var rdoLbl = document.createElement('p');
		        rdoLbl.className = 'form-control-static';
		        rdoLbl.appendChild(rdo);
		        rdoLbl.innerHTML += "&nbsp;&nbsp;&nbsp;" + obj.NameTh;

		        var image = new Image();
		        image.onload = function () {
		            image.style.width = "100px";
		            image.style.marginRight = "100px";
		            image.style.cssFloat = "right";
		        }
		        image.src = obj.Image;

		        var row = document.createElement('div');
		        row.className = 'form-group col-md-6';
		        row.appendChild(rdoLbl);
		        row.appendChild(image);

		        divHairStyle.appendChild(row);
		        break;
		    case 'สีผิว':
		        if (!lblSkinColor) return;
		        if (lblSkinColor.innerHTML === '') {
		            lblSkinColor.innerHTML = obj.Type;
		        }

		        var rdo = document.createElement('input');
		        rdo.type = 'radio';
		        rdo.name = 'rdoSkinColor';
		        rdo.value = obj.Name;

		        var rdoLbl = document.createElement('p');
		        rdoLbl.className = 'form-control-static';
		        rdoLbl.appendChild(rdo);
		        rdoLbl.innerHTML += "&nbsp;&nbsp;&nbsp;" + obj.NameTh;

		        var image = new Image();
		        image.onload = function () {
		            image.style.width = "100px";
		            image.style.marginRight = "100px";
		            image.style.cssFloat = "right";
		        }
		        image.src = obj.Image;

		        var row = document.createElement('div');
		        row.className = 'form-group col-md-6';
		        row.appendChild(rdoLbl);
		        row.appendChild(image);

		        divSkinColor.appendChild(row);
		        break;
		}
	});
	
}

$(window).load(function () {
    getData();

    if (typeof PersonInfo === 'undefined') return;
    var arr = PersonInfo[0];
    if (!arr) return;

    setTimeout(function () {
        $('input[name=rdoTing][value="' + arr.Earlobe + '"]').prop('checked', true);        
        $('input[name=rdoBaihu][value="' + arr.EarShape + '"]').prop('checked', true);
        $('input[name=rdoHairStyle][value="' + arr.HairStyle + '"]').prop('checked', true);
        $('input[name=rdoSkinColor][value="' + arr.SkinColor + '"]').prop('checked', true);
    }
    , 500);
});